<template>
  <div>
  <!--    头部区域开始-->
  <div style="height: 60px;  display: flex; ">
    <div style="width: 240px; display: flex;align-items: center;padding-left: 20px;background-color: #3a456b">
      <img style="width: 40px;height: 40px;border-radius: 50%;" src="@/assets/imgs/图书馆.png">
      <span style="font-size: 20px;font-weight: bold;color: #f1f1f1;margin-left: 5px">图书借阅系统</span>
    </div>

    <div style="flex:1;display: flex;align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd">
      <span style="margin-right: 5px;cursor: pointer" @click="router.push('/manager/home')">首页</span>/<span style="margin-left: 5px">{{ router.currentRoute.value.meta.name }}</span>
    </div>
    <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd">
      <el-dropdown>
        <div style="display: flex;align-items: center">
          <img v-if="data.user.avatar" style="width: 40px;height: 40px;border-radius: 50%" :src="data.user.avatar">
          <img v-else style="width: 40px;height: 40px;border-radius: 50%" src="F:\java\project\element-admin-web2025\code\files\default.jpg">
          <span style="margin-left: 5px">{{data.user?.name}}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
<!--  头部区域结束-->

<!--  下方区域开始-->
  <div style="display: flex">
<!--    菜单区域开始-->
    <div style="width: 240px">
      <el-menu :default-openeds="['1','2']" :default-active="router.currentRoute.value.path" style="min-height:calc(100vh - 60px)" router>
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="/front/home">
          <el-icon><Platform /></el-icon>
          <span>图书借阅</span>
        </el-menu-item>

        <el-sub-menu index="1">
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>信息管理</span>
          </template>
          <el-menu-item index="/manager/notice" v-if="data.user.role==='ADMIN'">系统公告</el-menu-item>
<!--          <el-menu-item index="/manager/notice" v-else>公告信息</el-menu-item>-->
          <el-menu-item index="/manager/introduction" v-if="data.user.role==='USER'">发布帖子</el-menu-item>
<!--          <el-menu-item index="/manager/introduction" v-else>帖子管理</el-menu-item>待开发-->
          <el-menu-item index="/manager/category" v-if="data.user.role==='ADMIN'">图书分类</el-menu-item>
          <el-menu-item index="/manager/book">图书信息</el-menu-item>
          <el-menu-item index="/manager/record">借阅记录</el-menu-item>
          <el-menu-item index="/manager/apply">预约申请</el-menu-item>
<!--          <el-menu-item index="/manager/postsSection">社区板块</el-menu-item>//待开发-->
          <el-menu-item index="/manager/activity">图书活动</el-menu-item>
          <el-menu-item index="/manager/room">阅览室</el-menu-item>
          <el-menu-item index="/manager/seat">座位信息</el-menu-item>
<!--          <el-menu-item index="/manager/activityRecord">活动报名消息</el-menu-item>-->

        </el-sub-menu>

        <el-sub-menu index="2" v-if="data.user.role==='ADMIN'">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
          <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>
      </el-menu>
    </div>
    <!--    菜单区域结束-->

<!--    数据渲染区域开始-->
    <div style="flex: 1;width: 0;padding: 10px;background-color: #f2f4ff">
      <RouterView @updateUser="updateUser"/>
    </div>
    <!--    数据渲染区域结束-->
  </div>
  <!--  下方区域结束-->
  </div>
</template>

<style setup>
.el-menu{
  background-color: #3a456b;
  border: none;
}
.el-sub-menu__title{
  background-color: #3a456b;
  color: #ddd;
}
.el-menu-item{
  height: 50px;
  color: #ddd;
}
.el-menu .is-active{
  background-color: #537bee;
  color: #fff;
}
.el-sub-menu__title:hover{
  background-color: #3a456b;
}
.el-menu-item:not(.is-active):hover{
  background-color: #7a9fff;
  color: #333;
}

.el-tooltip__trigger{
  outline: none;
}
.el-dropdown{
  cursor:pointer;
}
.el-menu--inline .el-menu-item{
  padding-left: 48px !important;
}
</style>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue"

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}")
})

const logout=()=>{
  localStorage.removeItem("code_user")
  location.href='/login'
}

if(!data.user?.id){
  location.href='/login'
}


const updateUser=()=>{
  data.user=JSON.parse(localStorage.getItem("code_user")||'{}')
}


</script>